<template>
	<view class="content">
		<u-navbar :fixed="false" :title="basicInfo.APFunName" :autoBack="true" :safeAreaInsetTop="true"
			leftIconColor="#fff"></u-navbar>

		<view class="content_main" style="padding: 10px;">
			<!-- 交货及时率 -->
			<view class="commonBox" style="background-color: rgba(142, 203, 94,0.6);">
				<view class="x-c" style="font-weight: 600;color: #fff;">
					<text>交货及时率</text>
				</view>
				<view class="x-bc" style="margin-top: 40rpx;color: #fff;">
					<view class="y-f" style="flex: 1;">
						<text>本月应到货数</text>
						<text>{{ topInfo.shouldNum }}</text>
					</view>
					<view class="y-f" style="flex: 1;">
						<text>本月实际到货数</text>
						<text>{{ topInfo.actualNum }}</text>
					</view>
				</view>
			</view>

			<!-- 采购退货 -->
			<view class="commonBox" style="background-color: rgba(81, 108, 252,0.6);">
				<view class="x-c" style="font-weight: 600;color: #fff;">
					<text>采购退货</text>
				</view>
				<view class="x-bc" style="margin-top: 40rpx;color: #fff;">
					<view class="y-f" style="flex: 1;">
						<text>退货数量</text>
						<text>{{ topInfo.returnNum }}</text>
					</view>
					<view class="y-f" style="flex: 1;">
						<text>退货金额(万元)</text>
						<text>{{ topInfo.returnAmount }}</text>
					</view>
				</view>
			</view>

			<!-- 卡片栏 -->
			<view class="commonBox">
				<view class="commonBox-title">
					<view class="commonBox-title-left">
						<text></text>
					</view>
					<view class="commonBox-title-right">
						<u-tabs lineColor="#51d0d0" @change="changeTopTabs" lineWidth="30" :current="tabsCurrent"
							:activeStyle="{color:'#51d0d0',fontWeight:'500',transform:'scale(1.05)'}"
							:list="realCondition"></u-tabs>
					</view>
				</view>
				<view class="commonBox-content">
					<view class="scrollWrap">
						<view v-for="(item, index) in cardData" :key="index" class="scrollWrap-item">
							<view class="y-f">
								<text>{{ item[realCondition[tabsCurrent].tabValueKey] }}</text>
								<text style="margin-top: 8px;font-size: 12px;">{{ item.title }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 图表 -->
			<view class="commonBox" v-for="(chart, idx) in chartList" :key="idx">
				<view class="commonBox-title">
					<view class="commonBox-title-left" style="width: fit-content !important;">
						<text>{{ chart.title }}</text>
					</view>
				</view>
				<view class="commonBox-content">
					<m-uCharts :chartType="chart.type" :chartData="chart.data" :ChartsStyle="ChartsStyle"></m-uCharts>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive, onMounted, computed } from 'vue';
	import dataInitFun from '@/commonPage/kanban/BIKanban/js/dataInit';
	import useRequestQueue from '@/uni_modules/mc-ui/libs/http/UniversalRequestQueue';
	const { request, requestByUrl, PromiseRequestByUrl, onAllComplete, onError } = useRequestQueue();
	import { useMainStore, useInventoryStore } from '@/store';
	const mainStore = useMainStore();
	const inventoryStore = useInventoryStore();
	import mUCharts from '../../components/m-uCharts/m-uCharts.vue';

	interface TopInfo {
		shouldNum : string | number;
		actualNum : string | number;
		returnNum : string | number;
		returnAmount : string | number;
	}

	interface CardItem {
		title : string;
		oldValue : number | string;
		newValue : number | string;
		[key : string] : any;
	}

	interface TabItem {
		name : string;
		tabValueKey : string;
	}

	interface ChartItem {
		title : string;
		type : string;
		data : any;
	}

	const dataInit = dataInitFun;

	// 基础信息
	const basicInfo = reactive({ APFunName: '' });

	// tabs
	const tabsCurrent = ref(1);
	const realCondition = reactive<TabItem[]>([
		{ name: '本月', tabValueKey: 'oldValue' },
		{ name: '上月', tabValueKey: 'newValue' },
	]);

	// 顶部卡片数据
	const cardData = ref<CardItem[]>([]);

	// 图表样式
	const ChartsStyle = reactive({ width: '100%', height: '240px' });

	// 顶部信息
	const topInfo = reactive<TopInfo>({
		shouldNum: '',
		actualNum: '',
		returnNum: '',
		returnAmount: '',
	});

	// 各类图表数据
	const chartData1 = ref<any>({});
	const chartData2 = ref<any>({});
	const chartData3 = ref<any>({});
	const chartData4 = ref<any>({});
	const chartData5 = ref<any>({});
	const chartData6 = ref<any>({});

	// 合并成数组方便渲染
	const chartList = computed<ChartItem[]>(() => [
		{ title: '物料到货率', type: 'line', data: chartData1.value },
		{ title: '采购产品量top6', type: 'pie', data: chartData2.value },
		{ title: '采购数量分析', type: 'column', data: chartData3.value },
		{ title: '供应商采购top6比例', type: 'pie', data: chartData4.value },
		{ title: '采购数量分析', type: 'column', data: chartData5.value },
		{ title: '供应商来料分析top6', type: 'column', data: chartData6.value },
	]);

	// 页面加载
	onMounted(() => {
		const storeBasicInfo = uni.$utils.deepClone(inventoryStore.Menu);


		basicInfo.APFunName = storeBasicInfo?.APFunName || '';
		getDataInfo();
	});

	// 获取数据
	function getDataInfo() {
		request({
			config: {
			},
			url: 'plat_caigou',
			method: 'POST',
			data: {},
			success: (ret : any) => {
				console.log(ret);
				if (ret.status === 200) {
					cardData.value = dataInit.getInitByKanban('采购', ret.data);
					console.log(cardData.value);
					topInfo.shouldNum = ret.data.ds3?.[0]?.Qty ?? '';
					topInfo.actualNum = ret.data.ds3?.[0]?.WCQty ?? '';
					topInfo.returnNum = ret.data.ds4?.[0]?.FQty ?? '';
					topInfo.returnAmount = ret.data.ds4?.[0]?.Money ?? '';

					// 物料到货率-折线
					chartData1.value = {
						ds5: ret.data.ds5.map((item : any) => ({
							seriesName: '',
							name: item.month,
							value: item.Rate,
							type: 'line',
						})),
					};

					// 饼图
					chartData2.value = {
						ds6: ret.data.ds6.map((item : any) => ({
							name: item.ProductCode,
							value: +item.Rate,
							type: 'pie',
						})),
					};

					// 柱状图
					chartData3.value = { ds7: transformData(ret.data.ds7) };
					chartData4.value = {
						ds8: ret.data.ds8.map((item : any) => ({
							name: item.SupplyName,
							value: +item.Rate,
							type: 'pie',
						})),
					};

					chartData5.value = {
						ds9: transformData(ret.data.ds9, 'ProductCode', 'OldPrice', 'Price', {
							aText: '旧价格',
							bText: '新价格',
						}),
					};

					chartData6.value = {
						ds10: ret.data.ds10.map((item : any) => ({
							seriesName: '物料数量',
							name: item.SupplyName,
							value: item.FQty,
							type: 'column',
						})),
					};
				}
			}

		})

	}

	// 数据转换函数
	function transformData(
		data : any[],
		dateKey = 'Month',
		ckQtyKey = 'OldQty',
		rkQtyKey = 'Qty',
		leng = { aText: '去年采购量', bText: '今年采购量' }
	) {
		const result : any[] = [];
		if (!Array.isArray(data)) throw new Error('Input data must be an array');

		data.forEach((item) => {
			result.push({ seriesName: leng.aText, name: item[dateKey], value: item[ckQtyKey], type: 'column' });
			result.push({ seriesName: leng.bText, name: item[dateKey], value: item[rkQtyKey], type: 'column' });
		});

		return result;
	}

	// 切换topCard
	function changeTopTabs(event : any) {
		tabsCurrent.value = event.index;
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #f2f2f2;
	}

	// 待办/实时数据横向滚动
	.scrollWrap {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		max-height: 180px;
		overflow-y: hidden;
		overflow-x: auto;
		row-gap: 3px;
		column-gap: 3px;

		&-item {
			min-width: 35vw;
			height: 80px;
			display: flex;
			flex-direction: column;
			background: linear-gradient(to bottom right, #F6F6F6, #FFFFFF);
			border-radius: 5px;
			padding: 5px 10px;
			justify-content: center;
			align-items: center;
		}
	}

	::v-deep.u-tabs__wrapper__nav__item {
		height: 30px !important;
	}

	.commonBox {
		display: flex;
		flex-direction: column;
		padding: 10px 5px;
		background-color: #ffffff;
		margin-bottom: 10px;
		border-radius: 16rpx;

		&-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10px 5px 10px 10px;

			&-left {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				width: 150rpx;
				font-size: 16px;
				font-weight: 500;
			}

			&-right {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				width: 100rpx;
			}
		}

		&-content {
			display: flex;
			flex-direction: column;
		}
	}

	.charts-box {
		width: 100%;
		height: 240px;
	}
</style>